<template>
  <div id="home">
    <navbar class="home-nav">
      <template #center>
        <div>购物街</div>
      </template>
    </navbar>
    <homeswiper :banners="banners"></homeswiper>
    <homerecommand :banners="banners"></homerecommand>
  </div>
</template>

<script>
  import navbar from 'components/common/navbar/NavBar.vue'
  import {getHomeMulttidata} from 'network/home.js'
  import homeswiper from './childrenComps/HomeSwiper.vue'
  import homerecommand from './childrenComps/HomeRecommand.vue'

  export default {
    name: 'Home',
    components:{
      navbar,
      homeswiper,
      homerecommand
    },
    data() {
      return {
        banners: [],
        recommends: [],
        bannerHeight: ''
      }
    },
    created() {
      //1.请求多个数据
      getHomeMulttidata().then(res => {
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
        // console.log(this.banners)
      })
    }
  }
</script>

<style>
  .home-nav{
    background-color: #F56C6C;
    color: #F2F6FC;
    font-family: "microsoft yahei";
    font-weight: bold;
    font-size: 36px;
  }
</style>
